<template>
  <el-form label-width="100px" ref="formRef" :model="dataForm" :rules="dataRule">
    <el-form-item :label="i18n('user.username')" prop="username">
      <el-input v-model="dataForm.username" :placeholder="i18n('common.please_input') + i18n('user.username')" :disabled="true"></el-input>
    </el-form-item>

    <el-form-item :label="i18n('user.nickname')" prop="nickname">
      <el-input v-model="dataForm.nickname" :placeholder="i18n('common.please_input') + i18n('user.nickname')" :disabled="true"></el-input>
    </el-form-item>

    <el-form-item :label="i18n('user.password.old_password')" prop="old_password">
      <el-input v-model="dataForm.old_password" type="password" show-password :placeholder="i18n('user.password.please_old_password')"></el-input>
    </el-form-item>

    <el-form-item :label="i18n('user.password.password')" prop="password">
      <el-input v-model="dataForm.password" type="password" show-password :placeholder="i18n('common.please_input') + i18n('user.password.password')"></el-input>
    </el-form-item>

    <el-form-item :label="i18n('user.password.password_confirmation')" prop="password_confirmation">
      <el-input v-model="dataForm.password_confirmation" type="password" show-password :placeholder="i18n('common.please_input') + i18n('user.password.password_confirmation')"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="dataFormSubmit(formRef)">
        {{ i18n('common.confirm') }}
      </el-button>
      <el-button @click="resetForm(formRef)">
        {{ i18n('common.reset') }}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup name="password">
  import { useBase } from "@/hooks/base/useBase"
  import { useForm } from "@/hooks/form/useForm"
  import { useStore } from "@/hooks/store/useStore"

  const { base, user, permission } = useStore()
  const { router, i18n } = useBase()

  const dataForm = reactive({
    id: 0,
    username: '',
    old_password: '',
    password: '',
    password_confirmation: '',
    nickname: '',
  })

  const dataRule = reactive({
    old_password: [{
        required: true,
        message: i18n('user.password.rules.old_password.require'),
        trigger: 'blur',
      }, {
        min: 1,
        max: 32,
        message: i18n('user.password.rules.old_password.length'),
        trigger: 'blur',
    }],
    password: [{
        required: true,
        message: i18n('user.password.rules.password.require'),
        trigger: 'blur',
      }, {
        min: 1,
        max: 32,
        message: i18n('user.password.rules.password.length'),
        trigger: 'blur',
    }],
    password_confirmation: [{
        required: true,
        message: i18n('user.password.rules.password_confirmation.require'),
        trigger: 'blur',
      }, {
        min: 1,
        max: 32,
        message: i18n('user.password.rules.password_confirmation.length'),
        trigger: 'blur',
    }],
  })

  const { formRef, resetForm } = useForm('', dataForm)

  const init = (form) => {
    dataForm.id = user.user_id || 0
    nextTick(() => {
      form.value.resetFields()
      if (dataForm.id) {
        $http({
          url: $http.adornUrl(`/user/view/${dataForm.id}`),
          method: 'get',
          params: $http.adornParams({}),
        }).then(({ data }) => {
          if (data && data.status === 200) {
            dataForm.username = data.data.username
            dataForm.nickname = data.data.nickname
          }
        })
      }
    })
  }


  // 表单提交
  const dataFormSubmit = (form) => {
    form.validate(async (valid, fields) => {
      if (valid) {
        $http({
          url: $http.adornUrl(`/user/change_password`),
          method: 'post',
          data: $http.adornData({
            id: dataForm.id || undefined,
            old_password: dataForm.old_password,
            password: dataForm.password,
            password_confirmation: dataForm.password_confirmation,
          }),
        }).then(({ data }) => {
          if (data && data.status === 200) {
            $message.success(i18n('common.handle_success'))

            base.clearData()
            user.clearData()
            permission.clearData()
            router.options.isAddDynamicMenuRoutes = false

            router.push({ name: 'login' })
          } else {
            $message.error(i18n(data.message))
          }
        })
      }
    })
  }

  onMounted(() => {
    init(formRef)
  })
</script>
